import React, { useState } from 'react'
import { Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import styles from './index.module.less'

// 指标列表数据结构
export interface ITargetList {
  targetName: string
  lastValue: string
  value: string
}

interface Iprops {
  tableHeader: string[] // 接口返回的表头
  targetList: ITargetList[] // 接口计算后的指标内容
  loading: boolean
}

export default (props: Iprops) => {
  const { tableHeader, targetList, loading } = props
  const columns: ColumnsType<any> = [
    {
      title: '编号',
      render: (value, record, index) => <span>{index + 1}</span>,
      align: 'center',
    },
    {
      title: '指标',
      dataIndex: 'targetName',
      key: 'targetName',
      align: 'center',
    },
    {
      title: `${tableHeader[0] || ''}`,
      dataIndex: 'lastValue',
      key: 'lastValue',
      align: 'center',
    },
    {
      title: `${tableHeader[1] || ''}`,
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
  ]
  return (
    <Table
      loading={loading}
      rowKey={'id'}
      className={styles.targetList}
      pagination={false}
      columns={columns}
      dataSource={targetList}
    />
  )
}
